<template>
	<view class="container">
		<image src="/static/images/index/top.png" class="full-width" mode="widthFix"></image>
		<view class="header">
			<view class="flex justify-between align-start">
				<image src="/static/images/index/title.png" style="width: 208rpx;height: 52rpx;" mode=""></image>
				<image src="/static/images/index/service.png" class="width-24 height-24" mode=""
					@click="handleToSerivce"></image>
			</view>
			<view class="f-s12" style="color: #666C76;margin-top: 14rpx;">
				<text>高品质兴趣社交平台</text>
			</view>
			<view class="text-white m-t22" style="padding:0 20rpx;" @click="handleToPage('data-statictics')">
				<view class="flex align-end justify-between">
					<view class="flex">
						<image :src="statisticsData.avatar" class="bg-white round width-36 height-36" mode=""></image>
						<view class="flex flex-direction justify-between m-l10">
							<text class="f-w600 f-s15 line-height20">{{statisticsData.nickname || '***'}}</text>
							<text
								class="f-w400 f-s11 line-height16 text-subtheme">下次升级时间：{{statisticsData.updateTime}}</text>
						</view>
					</view>
					<view class="">
						<view class="flex align-baseline">
							<text class="f-w600 f-s20 ">等级</text>
							<text class="f-w900 f-s32 m-l6">Lv.</text>
							<text class="f-w900 f-s32">{{statisticsLevel.name || "-"}}</text>
						</view>
						<view class="flex align-center justify-end">
							<text class="text-subtheme f-s11 f-w400 line-height16 m-r2"
								@click.stop="rulePopupShow=true">查看规则</text>
							<image src="/static/images/index/query.png" class="width-14 height-14" mode=""
								@click.stop="rulePopupShow=true"></image>
						</view>
					</view>
				</view>
				<view class="m-t10 flex justify-between" style="height: 144rpx;">
					<view class="flex flex-direction justify-center full-height p-lr8 relative"
						style="width: 210rpx;height: 144rpx;">
						<text class="f-s12">业绩(元)</text>
						<text class="text-bold f-s18 line-height22 m-t2">{{statisticsData.achievement || '-'}}</text>
						<view class="p-r8 m-t7">
							<u-line-progress :percentage="nextLevel.achievement || 0" :showText="false"
								inactiveColor="rgba(255, 217, 222, 0.2)" activeColor="#FFFFFF"
								height="12rpx"></u-line-progress>
						</view>
						<image src="/static/images/index/top-1.png" class="absolute full-width full-height"
							style="width: 210rpx;height: 144rpx;" mode=""></image>
					</view>
					<view class="flex flex-direction justify-center full-height p-lr8 relative"
						style="width: 210rpx;height: 144rpx;">
						<text class="f-s12">积分</text>
						<text class="text-bold f-s18 line-height22 m-t2">{{statisticsData.integral || '-'}}</text>
						<view class="p-r8 m-t7">
							<u-line-progress :percentage="nextLevel.integral || 0" :showText="false"
								inactiveColor="rgba(255, 217, 222, 0.2)" activeColor="#FFFFFF"
								height="12rpx"></u-line-progress>
						</view>
						<image src="/static/images/index/top-1.png" class="absolute full-width full-height"
							style="width: 210rpx;height: 144rpx;" mode=""></image>
					</view>
					<view class="flex flex-direction justify-center full-height p-lr8 relative"
						style="width: 210rpx;height: 144rpx;">
						<text class="f-s12">加时率</text>
						<text
							class="text-bold f-s18 line-height22 m-t2">{{isNaN(statisticsData.clock)?'-':statisticsData.clock+'%'}}</text>
						<view class="p-r8 m-t7">
							<u-line-progress :percentage="nextLevel.clock || 0" :showText="false"
								inactiveColor="rgba(255, 217, 222, 0.2)" activeColor="#FFFFFF"
								height="12rpx"></u-line-progress>
						</view>
						<image src="/static/images/index/top-1.png" class="absolute full-width full-height"
							style="width: 210rpx;height: 144rpx;" mode=""></image>
					</view>

				</view>
				<view class="m-t6 f-s10 line-height14 f-w400 text-cut">
					<text>{{nextLevel.content}}</text>
				</view>
			</view>
		</view>

		<view class="main" style="">
			<view class="menu">
				<view class="menu-item" v-for="(item,index) in menuList" :key="index" @click="handleToPage(item.path)">
					<view class="icon">
						<image :src="item.icon" class="width-32 height-32" mode=""></image>
					</view>
					<view class="title">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="inform">
				<image src="/static/images/index/inform.png" mode=""></image>
				<view class="inform-content overflow-hidden" @click="handleToNoticeDetail(noticeData.id)">
					<text class="text-cut">{{noticeData.title}}</text>
					<text class="text-gray shrink-0">{{noticeData.create_time}}</text>
				</view>
			</view>
			<view class="cell">
				<view class="cell-item">
					<image src="/static/images/index/position.png" class="width-20 height-20 shrink-0" mode=""></image>
					<view class="cell-content full-width">
						<text class="text-bold f-s15">{{serviceAddress || '暂无服务地址'}}</text>
					</view>
					<view class="cell-right shrink-0 flex align-center" @click="handleToPage('location-update')">
						<text class="text-gray f-s12">服务半径</text>
						<image src="/static/images/index/more.png" class="width-16 height-16" mode=""></image>
					</view>
				</view>
				<view class="cell-item" @click.stop="handleOpenPopup">
					<image src="/static/images/index/work.png" class="width-20 height-20 shrink-0" mode=""></image>
					<view class="cell-content full-width">
						<text class="text-bold f-s15">工作状态</text>
					</view>
					<view class="cell-right shrink-0 flex align-center">
						<view class="" style="width: 8rpx;height: 8rpx;border-radius: 4rpx;margin-right: 6rpx;"
							:style="{'background-color':workStatusList[workStatusCurrent]['active']}">
						</view>
						<text class="f-s12">{{workStatusFormat(statisticsData.work_status)}}</text>
						<image src="/static/images/index/more.png" class="width-16 height-16" mode=""></image>
					</view>
				</view>
				<view class="cell-item" @click="handleToPage('time-setting')">
					<image src="/static/images/index/time.png" class="width-20 height-20 shrink-0" mode=""></image>
					<view class="cell-content full-width">
						<text class="text-bold f-s15">接单时间设置</text>
					</view>
					<view class="cell-right shrink-0 flex align-center">
						<image src="/static/images/index/more.png" class="width-16 height-16" mode=""></image>
					</view>
				</view>
			</view>
			<view class="notice">
				<view class="flex justify-between align-start">
					<text class="f-s15 text-bold">最新公告</text>
					<view class="flex align-center"
						style="border-radius: 24rpx;border: 1rpx solid #B2B8C1;padding: 8rpx 12rpx 8rpx 20rpx;"
						@click="handleToPage('information')">
						<text class="f-s12">更多</text>
						<image src="/static/images/index/more.png" class="width-16 height-16" mode=""></image>
					</view>
				</view>
				<view class="m-t12"></view>
				<view class="notice-item" v-for="(item,index) in noticeList" :key="item.id"
					@click="handleToNoticeDetail(item.id)">
					<view class="f-s15 text-cut overflow-hidden">
						<text>{{item.title}}</text>
					</view>
					<view class="m-t8 flex justify-between">
						<text class="text-gray f-s12">{{item.create_time}}</text>
						<view class="flex align-center">
							<text class="text-gray">查看详情</text>
							<image src="/static/images/index/more.png" class="width-16 height-16" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Popup :show.sync="popupShow" title="工作状态设置">
			<view class="work-status">
				<view class="work-status-item flex align-center m-t10"
					:class="{'work-status-active':workStatusCurrent === index}" v-for="(item,index) in workStatusList"
					:key="index" @click="handleWorkStatusChange(index)">
					<view class="work-dot shrink-0 self-start" :class="'work-dot'+index"></view>
					<view class="work-content flex flex-direction full-width overflow-hidden p-l8">
						<text class="f-w500 f-s15 line-height20">{{item.text}}</text>
						<text class="text-gray f-w400 f-s12 line-height20 m-t4">{{item.content}}</text>
					</view>
					<view class="shrink-0">
						<image src="/static/images/index/radio-check.png" class="width-18 height-18" mode=""
							v-if="workStatusCurrent === index">
						</image>
						<image src="/static/images/index/radio.png" class="width-18 height-18" mode="" v-else></image>
					</view>
				</view>
				<view class="self-btn full-width m-t18" hover-class="pressed" @click="handleWorkStatusConfirm">
					<text>确认</text>
				</view>
			</view>
		</Popup>
		<u-popup :show="rulePopupShow" mode="center" round="20rpx" @close="rulePopupShow = false" closeOnClickOverlay>
			<view class="content-box">

				<view class="line-height24 f-s14 f-w400" style="max-height: 600rpx;overflow-y: auto;">
					<u-parse :content="statisticsLevel.rule_msg || '-'"></u-parse>
				</view>
				<view class="p-t8 bg-white full-width">
					<view class="confirm-btn" hover-class="pressed" @click.stop="rulePopupShow = false">
						<text>我知道了</text>
					</view>
				</view>
			</view>
		</u-popup>
		<Toast></Toast>
	</view>
</template>

<script>
	import Popup from "@/components/popup/index.vue"
	import {
		indexData,
		notice,
		noticeList
	} from "@/api/index"
	import {
		setWorkStatus,
		setPosition
	} from "@/api/index/set.js"
	import {
		mapState
	} from 'vuex'
	import permision from "@/common/permission.js"
	import {
		async
	} from "regenerator-runtime"
	import toService from "@/config/toService.js"
	const sdkwx = uni.requireNativePlugin('AMap-LocTrack');
	const loc = uni.requireNativePlugin('AMap-Loc');
	export default {
		name: "",
		components: {
			Popup
		},
		data() {
			return {
				levelRule: '',
				// 下一等级数据
				nextLevel: {
					isTop: false, // 是否顶级
					clock: 0,
					achievement: 0,
					integral: 0,
					content: ''
				},
				rulePopupShow: false, // 规则弹出框
				serviceAddress: '正在定位...', // 服务地址
				statisticsData: {}, // 统计数据
				statisticsLevel: {}, // 等级收入相关数据
				statisticsPositon: {}, // 位置相关数据
				noticeData: {}, // 最新公告
				noticeList: [], // 公告列表
				noticeQuery: {
					// status: 1, // 搭搭公告
					page: 1,
					limt: 10
				},
				workStatusCurrent: 1,
				workStatusList: [{
					value: 0,
					text: '休息中',
					content: '表示不再接单，会显示在用户端列表',
					active: '#f37b1d'
				}, {
					value: 1,
					text: '在线',
					content: '表示接单中',
					active: '#00B83D'
				}, {
					value: 3,
					text: '离线',
					content: '不会显示在用户列表',
					active: '#e54d42'
				}],
				popupShow: false,
				menuList: [{
					title: '积分统计',
					icon: '/static/images/index/menu-1.png',
					path: 'integral-statictics'
				}, {
					title: '资金明细',
					icon: '/static/images/index/menu-2.png',
					path: 'capital-statictics'
				}, {
					title: '分成明细',
					icon: '/static/images/index/menu-3.png',
					path: 'commission-statictics'
				}, {
					title: '车费明细',
					icon: '/static/images/index/menu-4.png',
					path: 'fare-statictics'
				}, {
					title: '行程记录',
					icon: '/static/images/index/menu-5.png',
					path: 'ride-recorder'
				}]
			}
		},
		onTabItemTap(index) {
			this.getIndexData()
		},
		onShow() {
			this.getNoticeList()
			this.getNotice()
			this.getUserInfo()
		},
		onLoad() {
			// #ifdef H5
			this.$store.commit('SET_POSITION', {
				lat: '28.246134',
				lng: '112.932366'
			})
			setPosition({
				province: '湖南省',
				city: "长沙市",
				district: '岳麓区',
				address: '长沙市政府',
				lat: '28.246134',
				lng: '112.932366'
			}).then(res => {})
			// #endif
			try {
				//隐私合规接口
				var isContains = true; //隐私权政策是否包含高德开平隐私权政策  true是包含
				var isShow = true; //隐私权政策是否弹窗展示告知用户 true是展示 
				sdkwx.updatePrivacyShow(isContains, isShow);

				var isAgree = true; //隐私权政策是否取得用户同意  true是用户同意
				let v1 = sdkwx.updatePrivacyAgree(isAgree);
				let _this = this

				//设置定位数据回调
				loc.setLocationCallback((res) => {
					if (res.code == 0) {
						let {
							data
						} = res //定位数据
						this.handleAutoSetPosition(data)
					} else {
						this.$toast(res.msg)
					}
				});
				//定位配置
				loc.setLocationOption({
					needAddress: true, //定位是否需要解析地址
					interval: 1 * 60 * 1000, //(android）设置定位间隔,单位毫秒,默认为2000ms，最低1000ms。
					httpTimeOut: 30000, //  (android）设置定位请求超时时间,单位是毫秒，默认30000毫秒，不要低于8000毫秒。
					locationCacheEnable: false, //(android）设置是否开启定位缓存机制
					allowsBackgroundLocationUpdates: true, //(ios）是否允许后台定位
					pausesLocationUpdatesAutomatically: false, //(ios）后台定位是否会被系统自动暂停
					distanceFilter: 10, //(ios）设置定位最小更新距离方法如下，单位米。当两次定位距离满足设置的最小更新距离时，SDK会返回符合要求的定位结果。
					enableHTTPS: true //(ios）
				});
				// 兼容Android特殊权限
				this.enableBackgroundLocation()
			} catch (error) {
				console.error(error)
				this.getIndexData()
			}
			this.getIndexData()
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo || {}
			})
		},
		methods: {
			// 开始定位
			startLocation() {
				// 检查后台定位定位是否正在运行
				const status = loc.isLocationRunning();
				if (!status) {
					// 停止状态，开始定位
					loc.startLocation();
				}
			},
			// 停止定位
			stopLocation() {
				// 检查后台定位定位是否正在运行
				const status = loc.isLocationRunning();
				if (status) {
					//开启状态，停止定位
					loc.stopLocation();
				};
			},
			enableBackgroundLocation() {
				//android特有的接口
				//检查是否允许通知，oppo vivo等部分手机默认不允许通知
				if (loc.areNotificationsEnabled()) {
					//是否忽略电池优化，vivo部分手机需要忽略电池优化，保活才不被杀掉
					if (loc.isIgnoringBatteryOptimizations()) {
						//开启后台定位功能
						uni.getSystemInfo({
							success: function(res) {
								loc.enableBackgroundLocation({
									contentTitle: res.appName,
									contentText: "正在后台运行"
								});
							}
						});
					} else {
						//请求忽略电池优化
						loc.requestIgnoreBatteryOptimizations();
					}
				} else {
					//打开设置通知
					loc.openSetting();
				}
			},
			// 判断是否始终允许定位
			grantedAlwaysLocation() {
				return loc.grantedAlwaysLocation();
			},
			// 自动更新定位信息
			handleAutoSetPosition(position) {
				let {
					province,
					city,
					district,
					street,
					aoiName,
					latitude,
					longitude
				} = position
				// 定位地址与存储地址一致，不调用接口
				if ((street + aoiName) == this.serviceAddress) return
				this.$store.commit('SET_POSITION', {
					lat: latitude,
					lng: longitude,
					province,
					city,
					district,
					address: street + aoiName
				})
				this.serviceAddress = street + aoiName
				// 更新位置信息
				setPosition({
					province,
					city,
					district,
					address: this.serviceAddress,
					lat: latitude,
					lng: longitude
				})
			},
			// 更新位置信息
			handleSetPosition() {
				this.serviceAddress = "正在定位..."
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						let {
							address,
							latitude,
							longitude
						} = res;
						let {
							province,
							city,
							district,
							street,
							poiName
						} = address;
						this.$store.commit('SET_POSITION', {
							lat: latitude,
							lng: longitude,
							province,
							city,
							district,
							address: street + poiName
						})
						this.serviceAddress = street + poiName
						// 更新位置信息
						setPosition({
							province,
							city,
							district,
							address: this.serviceAddress,
							lat: latitude,
							lng: longitude
						}).then(res => {})
					},
					fail: () => {
						this.serviceAddress = '定位失败'
					}
				});
			},
			async checkPermission() {
				let status = permision.isIOS ? await permision.requestIOS('location') :
					await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION');
				if (status === null || status === 1) {
					status = 1;
				} else if (status === 2) {
					// 定位服务未启用
					this.serviceAddress = '定位服务未开启'
					this.$toast("定位服务未开启")
				} else {
					this.serviceAddress = '定位权限未开启'
					uni.showModal({
						title: "提示",
						content: '定位权限未开启，请前往设置打开授权',
						confirmText: '前往设置',
						success(res) {
							if (res.confirm) {
								uni.openAppAuthorizeSetting()
							}
						}
					})
				}
				return status
			},
			handleOpenPopup() {
				this.popupShow = true
			},
			getUserInfo() {
				this.$store.dispatch('GetInfo').then(res => {
					let {
						data: {
							info
						}
					} = res
					let serviceCity = Boolean(Number(info?.city_ids))
					if (!serviceCity) {
						// 未设置服务城市，要求强制设置服务城市
						uni.showModal({
							title: "服务设置提示",
							content: '请设置您提供服务的城市和服务项目',
							confirmText: '前往设置',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									this.$tab.navigateTo('/pages/mine/menu/service')
								}
							}
						})
					}
				})
			},
			// 跳转公告详情
			handleToNoticeDetail(id) {
				this.$tab.navigateTo('/pages/index/inside/noticeDetail?id=' + id)
			},
			// 获取公告列表
			getNoticeList() {
				noticeList(this.noticeQuery).then(res => {
					this.noticeList = res.data.list
				})
			},
			// 获取最新一条公告
			getNotice() {
				notice().then(res => {
					this.noticeData = res.data[0] || {}
				})
			},
			// 用户数据
			getIndexData() {
				indexData().then(async res => {
					let {
						data: {
							technician,
							level,
							position,
							updateTime,
							tech_level_rule,
							technician_level
						}
					} = res
					// 查找等级列表用户当前等级数据
					let levelIndex = level?.findIndex(item => item.id === technician.level_id) ?? {}
					this.statisticsLevel = level?.[levelIndex] || {}
					// 计算处理下一等级需要数据
					let nextLevel = technician_level?.next_level ?? null
					if (nextLevel) {
						// 存在下一等级数据
						let {
							clock,
							achievement,
							integral
						} = this.statisticsData
						this.nextLevel = {
							isTop: false, // 是否顶级
							clock: clock / nextLevel.clock * 100,
							achievement: achievement / nextLevel.achievement * 100,
							integral: integral / nextLevel.integral * 100,
							// content:`距离下一级：业绩还差${nextLevel.achievement - achievement}元，积分还差${nextLevel.integral - integral}积分，加时率还差${nextLevel.clock - clock}%`
							content: technician_level.now_next_desc
						}
					} else {
						this.nextLevel = {
							isTop: true,
							clock: 100,
							achievement: 100,
							integral: 100,
							content: '当前已是最高等级'
						}
					}
					this.levelRule = tech_level_rule || '' // 规则说明
					this.statisticsData = technician || {}
					// 设置工作状态
					this.workStatusCurrent = this.workStatusList.findIndex(item => item.value == this
						.statisticsData.work_status)
					this.statisticsData.updateTime = updateTime

					this.statisticsPositon = position || {}
					// 是否开启自动定位
					let autoPosition = this.statisticsData?.auto_update ?? 0
					// 开启状态 
					if (!autoPosition) {
						//检查定位权限, 注：Android在app首次启动的第一个页面onLoad里调用时，部分手机第一次可能不会弹出权限检查，可延迟调用检查定位权限
						loc.checkLocationPermission((res) => {
							if (res.result) {
								//检查 始终允许 定位，注：ios只有首次安装时才会弹框提醒和回调
								loc.checkAlwaysLocationPermission();
								this.startLocation()
								// 手动更新一次位置
								this.handleSetPosition()
							} else {
								uni.showModal({
									title: "提示",
									content: '请开启始终允许定位权限',
									confirmText: '前往设置',
									showCancel: true,
									success(res) {
										if (res.confirm) {
											uni.openAppAuthorizeSetting()
										}
									}
								})
							}
						});
						// 判断是否开始始终允许定位权限
						let always = this.grantedAlwaysLocation()
						if (!always) {
							uni.showModal({
								title: "提示",
								content: '请开启始终允许定位权限',
								confirmText: '前往设置',
								showCancel: true,
								success(res) {
									if (res.confirm) {
										uni.openAppAuthorizeSetting()
									}
								}
							})
						} else {
							this.startLocation()
							// 手动更新一次位置
							this.handleSetPosition()
						}
					} else {
						// 未开启，判断信息中是否存在坐标信息
						if (this.statisticsPositon?.lat) {
							// 存在坐标信息，使用已保存的信息
							let {
								address,
								lat,
								lng
							} = this.statisticsPositon
							this.$store.commit('SET_POSITION', {
								lat,
								lng
							})
							this.serviceAddress = address
						} else {
							// 不存在坐标信息，检查定位权限，获取当前位置
							let state = await this.checkPermission()
							if (state === null || state === 1) {
								// 存在定位权限，获取当前定位并更新
								this.handleSetPosition()
							}
						}

					}

				})
			},
			checkWorkStatus(item) {
				return item.value == this.statisticsData.work_status
			},
			// 工作状态翻译
			workStatusFormat(val) {
				let findResult = this.workStatusList.find(item => item.value == val)
				return findResult?.text
			},
			handleMakePhone() {
				this.$modal.makePhone(getApp().globalData.config.SERVICE_TEL)
			},
			handleToSerivce() {
				toService()
				// this.$modal.makePhone(getApp().globalData.config.SERVICE_TEL)
			},
			handleWorkStatusConfirm() {
				let findResult = this.workStatusList[this.workStatusCurrent]['value']
				this.$modal.loading('设置中')
				setWorkStatus({
					field: 'work_status',
					value: findResult
				}).then(res => {
					this.$modal.closeLoading()
					this.$toast('设置成功')
					this.popupShow = false
					this.getIndexData()
				}).catch(() => this.$modal.closeLoading())
			},
			handleWorkStatusChange(index) {
				this.workStatusCurrent = index
			},
			handleToPage(path) {
				this.$tab.navigateTo(path)
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.m-t7 {
			margin-top: 14rpx;
		}

		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			padding: 28rpx;
			padding-top: 116rpx;
			box-sizing: border-box;
		}

		.text-subtheme {
			color: #FBC9D2;
		}

		.f-w900 {
			font-weight: 900;
		}

		.main {
			position: relative;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			margin-top: -100rpx;
			background-color: #F5F6F7;
			// z-index: 999;
			width: 100%;
			// height: 600rpx;
			padding: 24rpx;
			box-sizing: border-box;


			.menu {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 26rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-around;

				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.icon {
						width: 64rpx;
						height: 64rpx;
						background: #202020;
						border-radius: 20rpx;
						margin-bottom: 12rpx;
					}

					.title {
						font-size: 22rpx;
						color: #404040;
					}
				}
			}

			.inform {
				background-color: #fff;
				border-radius: 36rpx;
				border: 2rpx solid #FFFFFF;
				height: 72rpx;
				margin-top: 20rpx;
				display: flex;

				&>image {
					width: 148rpx;
					height: 72rpx;
					flex-shrink: 0;
				}

				.inform-content {
					width: 100%;
					padding-right: 24rpx;
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.cell {
				margin-top: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 0 30rpx;
				box-sizing: border-box;

				.cell-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 38rpx 0;

					.cell-content {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding-left: 20rpx;
						box-sizing: border-box;
					}
				}
			}

			.notice {
				margin-top: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 24rpx 24rpx 32rpx 24rpx;
				box-sizing: border-box;

				.notice-item {
					margin-bottom: 48rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}

		.work-status {
			margin-top: 40rpx;

			.work-status-item {
				border-radius: 12rpx;
				border: 2rpx solid #DDE0E6;
				padding: 20rpx 32rpx 20rpx 24rpx;
				box-sizing: border-box;

				.work-dot {
					width: 16rpx;
					height: 16rpx;
					background: #B2B8C1;
					border-radius: 50%;
					margin-top: 12rpx;
				}
			}

			.work-status-active {
				border: 4rpx solid #202020;

				.work-dot0 {
					background-color: #f37b1d;
				}

				.work-dot1 {
					background-color: #00B83D;
				}

				.work-dot2 {
					background-color: #e54d42;
				}
			}
		}

		.content-box {
			width: 564rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			padding: 30rpx;

			.confirm-btn {
				width: 228rpx;
				height: 72rpx;
				background: #202020;
				border-radius: 8rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				margin-left: 24rpx;
				text-align: center;
				margin: 0 auto;
			}
		}
	}
</style>